<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link rel="stylesheet" href="./styles/base.css" />
    <link rel="stylesheet" href="./styles/index.css" />

</head>

<body>

    <div class="todoapp" id="app">
        <header class="header">
            <h1>todos</h1>
            <input v-model="isAll" id="toggle-all" class="toggle-all" type="checkbox" />
            <label for="toggle-all"></label>
            <!--     3.1: 输入框 – 键盘事件 – 回车按键  通过双向绑定拿到文本框中的值  -->
            <input @keydown.enter="downFn" v-model="task" class="new-todo" placeholder="输入任务名称-回车确认" autofocus />
        </header>
        <ul class="todo-list">
            <!-- completed: 完成的类名 -->
            <li :class="{completed: item.isDone}" v-for="item in showArr" :key="item.id">
                <div class="view">
                    <input class="toggle" type="checkbox" v-model="item.isDone" />
                    <label>{{item.name}}</label>
                    <!-- 4.1 x标签 – 点击事件 – 传入id区分 -->
                    <button class="destroy" @click="delFn(item.id)"></button>
                </div>
            </li>

        </ul>

        <footer class="footer">
            <span class="todo-count">任务<strong>{{count}}</strong></span>
            <ul class="filters">
                <!--  6.2  点击修改getSel的值 点击全部 getSel的值 为 all   -->
                <li @click="typeFn('all')">
                    <!-- 6.3.1 多个class分别判断谁应该有类名  selected  -->
                    <!-- 需要把原有的class删除掉  -->
                    <a :class="{selected: getSel === 'all'}" href="javascript:;">全部</a>
                </li>
                <!-- 6.2.1  已完成 yes    未完成   no  -->
                <li @click="typeFn('no')">
                    <a :class="{selected: getSel === 'no'}" href="javascript:;">未完成</a>
                </li>
                <!-- 6.2.2  未完成   no  -->
                <li @click="typeFn('yes')">
                    <a :class="{selected: getSel === 'yes'}" href="javascript:;">已完成</a>
                </li>
            </ul>

        </footer>



    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            // 指定模板的入口
            el: "#app",
            data: {
                // 定义模板中要使用的数据
                list: [
                    { id: 100, name: "吃饭", isDone: true },
                    { id: 201, name: "睡觉", isDone: false },
                    { id: 103, name: "打豆豆", isDone: true },
                ],
                // 3.2 定义数据存储文本框输入的内容
                task: "",
                //  6.1 定义getSel – 默认为显示全部
                getSel: "all",
                // 8.1 默认从本地取值
                list: JSON.parse(localStorage.getItem('todoList')) || [],
            },
            methods: {
                // 3.3 定义methods 方法 
                downFn() {
                    // 3.4 判断文本款的是内容是否为空 为空提示
                    if (this.task.trim().length === 0) {
                        return alert("任务名不能为空");
                    }
                    // 3.5 生成一个随机数 
                    let id = Math.random()
                    // 3.6 把id追加进入
                    this.list.push({
                        id: id,
                        name: this.task,
                        isDone: false
                    })
                    // 3.7 清空文本框
                    this.task = ""
                },
                // 4.2 定义方法 根据id 删除数组list里某个对应的对象
                delFn(id) {
                    this.list = this.list.filter(item => item.id != id)
                },
                // 6.3  点击修改getSel的值 点击全部 getSel的值 为 all   已完成 yes    未完成   no 
                typeFn(str) {
                    this.getSel = str
                },
            },
            // 5.1 定义到和methods 平级 
            computed: {
                count() {
                    return this.showArr.length
                },
                // 7.1 定义计算属性 showArr 根据getSel 的值 做筛选 
                showArr() {
                    if (this.getSel === 'yes') { // 显示已完成
                        return this.list.filter(item => item.isDone === true)
                    } else if (this.getSel === 'no') { // 显示未完成
                        return this.list.filter(item => item.isDone === false)
                    } else {
                        return this.list // 全部显示
                    }
                },
                isAll: {
                    set(checked) { // 只有true / false
                        // 9.3 影响数组里每个小选框绑定的isDone属性
                        this.list.forEach(obj => obj.isDone = checked)
                    },
                    get() {
                        // 9.4 小选框统计状态 -> 全选框
                        // 9.5 如果没有数据, 直接返回false-不要让全选勾选状态
                        return this.list.length !== 0 && this.list.every(obj => obj.isDone === true)
                    }
                }
          
        },
            // 8. 目标: 数据缓存
         watch: {
            list: {
                deep: true,
                handler() {
                    // 8.0 只要list变化 - 覆盖式保存到localStorage里
                    localStorage.setItem('todoList', JSON.stringify(this.list))
                }
            }
        },
        })
    </script>
</body>

</html>